<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业数据分析平台</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
        }
        
        .tab-active {
            border-bottom: 3px solid #4ade80;
            color: #16a34a;
            font-weight: 600;
        }
        
        .btn-primary {
            background-color: #16a34a;
            color: white;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            background-color: #22c55e;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(16, 163, 74, 0.3);
        }
        
        .input-field {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            border-color: #4ade80;
            box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
        }
        
        .result-card {
            background-color: #f0fdf4;
            border-left: 4px solid #4ade80;
        }
        
        .slider-thumb::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #16a34a;
            cursor: pointer;
        }
        
        .slider-thumb::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #16a34a;
            cursor: pointer;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
    </style>
</head>
<body class="min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- 标题区域 -->
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-green-600 mb-2">
                <i class="fas fa-leaf mr-3"></i>智慧农业数据分析平台
            </h1>
            <p class="text-lg text-slate-600">利用AI技术助力现代农业发展</p>
        </div>
        
        <!-- 主内容区域 -->
        <div class="glass-card p-6 mb-8">
            <!-- 标签导航 -->
            <div class="flex border-b border-gray-200 mb-6">
                <button id="tab1" class="tab-active px-6 py-3 text-lg">番茄疾病识别</button>
                <button id="tab2" class="px-6 py-3 text-lg text-gray-600">SQL数据分析</button>
            </div>
            
            <!-- 番茄疾病识别面板 -->
            <div id="panel1" class="fade-in">
                <div class="mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-2">
                        <i class="fas fa-seedling mr-2 text-green-500"></i>番茄疾病识别
                    </h2>
                    <p class="text-gray-600">上传番茄叶片图片进行疾病识别分析</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- 输入区域 -->
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">上传图片</label>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-green-300 transition-colors" id="uploadArea">
                                <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                                <p class="text-gray-500">点击或拖拽图片到此处</p>
                                <input type="file" id="imageInput" class="hidden" accept="image/*">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">置信度阈值: <span id="confValue">0.25</span></label>
                            <input type="range" min="0" max="1" step="0.01" value="0.25" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb" id="confSlider">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">交并比阈值: <span id="iouValue">0.45</span></label>
                            <input type="range" min="0" max="1" step="0.01" value="0.45" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb" id="iouSlider">
                        </div>
                        
                        <button class="btn-primary py-3 px-6 rounded-lg w-full" id="analyzeBtn">
                            <i class="fas fa-search mr-2"></i>分析图片
                        </button>
                    </div>
                    
                    <!-- 输出区域 -->
                    <div class="space-y-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">识别结果</label>
                            <div class="border border-gray-200 rounded-lg p-4 bg-white h-64 flex items-center justify-center" id="resultImage">
                                <p class="text-gray-400">识别结果将显示在这里</p>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">番茄疾病识别结果</label>
                            <div class="result-card p-4 rounded-lg min-h-20" id="diseaseResult">
                                <p class="text-gray-400">疾病诊断结果将显示在这里</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- SQL数据分析面板 -->
            <div id="panel2" class="hidden fade-in">
                <div class="mb-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-2">
                        <i class="fas fa-database mr-2 text-blue-500"></i>SQL数据分析
                    </h2>
                    <p class="text-gray-600">输入你的数据分析需求，系统会自动生成对应数据表中的DML语句</p>
                </div>
                
                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">SQL生成需求</label>
                        <textarea class="input-field w-full p-4" rows="3" placeholder="例如：请生成一个在"12:00:00"至"23:59:59"识别记录时间段之间出现次数最多的病虫害名称的前三名的SQL语句，去除"未达到置信度阈值"的记录，表名为detection。" id="sqlRequirement"></textarea>
                    </div>
                    
                    <button class="btn-primary py-3 px-6 rounded-lg" id="generateSqlBtn">
                        <i class="fas fa-code mr-2"></i>生成SQL语句
                    </button>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">生成的SQL语句</label>
                        <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm" id="sqlOutput">
                            <p class="text-gray-400">生成的SQL语句将显示在这里</p>
                        </div>
                    </div>
                    
                    <button class="btn-primary py-3 px-6 rounded-lg" id="queryBtn">
                        <i class="fas fa-search mr-2"></i>查询
                    </button>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">生成的SQL语句查询结果</label>
                        <div class="bg-gray-50 p-4 rounded-lg font-mono text-sm" id="sqlResult">
                            <p class="text-gray-400">查询结果将显示在这里</p>
                        </div>
                    </div>
                    
                    <button class="btn-primary py-3 px-6 rounded-lg" id="reportBtn">
                        <i class="fas fa-file-alt mr-2"></i>生成数据分析报告
                    </button>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">数据分析结论</label>
                        <div class="result-card p-4 rounded-lg" id="analysisConclusion">
                            <p class="text-gray-400">数据分析结论将显示在这里</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 标签切换功能
        const tab1 = document.getElementById('tab1');
        const tab2 = document.getElementById('tab2');
        const panel1 = document.getElementById('panel1');
        const panel2 = document.getElementById('panel2');
        
        tab1.addEventListener('click', () => {
            tab1.classList.add('tab-active');
            tab2.classList.remove('tab-active');
            panel1.classList.remove('hidden');
            panel2.classList.add('hidden');
        });
        
        tab2.addEventListener('click', () => {
            tab2.classList.add('tab-active');
            tab1.classList.remove('tab-active');
            panel2.classList.remove('hidden');
            panel1.classList.add('hidden');
        });
        
        // 滑块值显示
        const confSlider = document.getElementById('confSlider');
        const iouSlider = document.getElementById('iouSlider');
        const confValue = document.getElementById('confValue');
        const iouValue = document.getElementById('iouValue');
        
        confSlider.addEventListener('input', () => {
            confValue.textContent = confSlider.value;
        });
        
        iouSlider.addEventListener('input', () => {
            iouValue.textContent = iouSlider.value;
        });
        
        // 图片上传预览
        const uploadArea = document.getElementById('uploadArea');
        const imageInput = document.getElementById('imageInput');
        const resultImage = document.getElementById('resultImage');
        
        uploadArea.addEventListener('click', () => {
            imageInput.click();
        });
        
        imageInput.addEventListener('change', (e) => {
            if (e.target.files && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = (event) => {
                    resultImage.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full" alt="上传的番茄叶片图片">`;
                };
                reader.readAsDataURL(e.target.files[0]);
            }
        });
        
        // 拖拽上传功能
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('border-green-300');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('border-green-300');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('border-green-300');
            
            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
                imageInput.files = e.dataTransfer.files;
                const reader = new FileReader();
                reader.onload = (event) => {
                    resultImage.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full" alt="上传的番茄叶片图片">`;
                };
                reader.readAsDataURL(e.dataTransfer.files[0]);
            }
        });
        
        // 模拟分析按钮点击
        document.getElementById('analyzeBtn').addEventListener('click', async () => {
            const fileInput = document.getElementById('imageInput');
            const confSlider = document.getElementById('confSlider').value;
            const iouSlider = document.getElementById('iouSlider').value;
            
            if (!fileInput.files[0]) {
                alert("请先上传图片");
                return;
            }

            const formData = new FormData();
            formData.append("file", fileInput.files[0]);
            formData.append("conf_threshold", confSlider);
            formData.append("iou_threshold", iouSlider);

            const response = await fetch("http://localhost:8000/predict", {
                method: "POST",
                body: formData
            });

            const anaresult = await response.json();

            const resultImage = document.getElementById('resultImage');
            const diseaseResult = document.getElementById('diseaseResult');

            resultImage.innerHTML = `<img src="${anaresult.image}" class="max-h-full max-w-full" alt="识别结果">`;
            diseaseResult.innerHTML = `
                <p class="font-semibold text-green-600">${anaresult.label}</p>
                <p class="text-sm text-gray-600 mt-1">置信度: ${anaresult.confidence * 100}%</p>
                <p class="text-sm text-gray-600">${anaresult.suggestion}</p>
            `;
        });
        
        // 模拟SQL生成
        document.getElementById('generateSqlBtn').addEventListener('click', async () => {
                const requirement = document.getElementById('sqlRequirement').value;

                const formData = new FormData();
                formData.append("requirement", requirement);  // 注意字段名必须和接口参数一致

                const response = await fetch("http://localhost:8000/generate-sql", {
                    method: "POST",
                    body: formData
                });
                
                const sqlresult = await response.json();
                document.getElementById('sqlOutput').innerText = sqlresult.sql;
        });
        
        // 模拟查询按钮
        document.getElementById('queryBtn').addEventListener('click', async () => {
            const sql = document.getElementById('sqlOutput').innerText;

            const response = await fetch("http://localhost:8000/execute-sql", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ sql })
            });

            const queryresult = await response.json();
            document.getElementById('sqlResult').innerText = queryresult.result;
        });
        
        // 模拟报告生成
        document.getElementById('reportBtn').addEventListener('click', async () => {
            const sqlResult = document.getElementById('sqlResult').innerText; // 使用不同的变量名

            const response = await fetch("http://localhost:8000/generate-report", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ result: sqlResult }) // 传递正确的变量
            });

            const reportResult = await response.json(); // 使用不同的变量名
            document.getElementById('analysisConclusion').innerHTML = `
                <p class="font-semibold text-gray-800">数据分析结论:</p>
                <p class="text-gray-700 mt-2">${reportResult.report}</p>
            `;
        });
    </script>
</body>
</html>